<template>
  <a-modal
    :visible.sync="showAddRemarkModal"
    :footer="null"
    @cancel="closeModal"
    :destroy-on-close="true"
    width="30vw"
  >
    <a-form layout="inline" class="remark-form">
      <a-form-item label="备注">
        <a-textarea
          allow-clear
          :autosize="{ minRows: 2, maxRows: 6 }"
          placeholder="请输入备注信息"
          v-model="state.remarkDesc"
        />
      </a-form-item>
    </a-form>
    <div class="text-center mt20">
      <a-space>
        <a-button
          type="primary"
          @click="confirmRemarkAllocation"
          :loading="state.loadingConfirmAllocationBtn"
        >
          确定
        </a-button>
        <a-button @click="closeModal"> 取消 </a-button>
      </a-space>
    </div>
  </a-modal>
</template>
<script>
import { todo_remark_add_post } from 'server/modules/7537'
export default {
  name: 'remarkAddModal',
  props: ['ids', 'showAddRemarkModal'],
  data() {
    return {
      state: {
        remarkDesc: null,
        loadingConfirmAllocationBtn: false
      }
    }
  },
  methods: {
    async confirmRemarkAllocation() {
      if (this.state.remarkDesc === '') {
        this.$message.error('请输入备注')
        return
      }
      this.state.loadingConfirmAllocationBtn = true
      Promise.all(
        this.ids.map(id => {
          return todo_remark_add_post({
            bizId: id,
            bizType: 10,
            remark: this.state.remarkDesc
          })
        })
      )
        .then(res => {
          const success = res.every(({ success }) => success)
          if (success) {
            this.$message.success('success')
            this.$emit('refresh')
          } else {
            res.forEach(({ retInfo }) => {
              this.$message.error(retInfo)
            })
          }
        })
        .finally(() => {
          this.state.loadingConfirmAllocationBtn = false
          this.closeModal()
        })
    },
    closeModal() {
      this.state.remarkDesc = null
      this.$emit('closeModal')
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.remark-form) {
  .ant-form-item {
    display: flex;
    .ant-form-item-control-wrapper {
      flex-grow: 1;
    }
  }
}
</style>
